{% extends '_base.html' %}

{% block title %}个人中心{% endblock %}

{% block content %}
    {% include 'account/components/profile_header.html' %}

    <div id="about" class="relative bg-white overflow-hidden px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:pb-28 xl:pb-32">
                <div class="mt-10 sm:mt-12 md:mt-16 lg:mt-20 xl:mt-28">
                    <div class="text-center lg:text-left">
                        <h2 class="mb-8 text-3xl font-extrabold text-gray-900 sm:text-4xl md:text-5xl">
                            关于我
                        </h2>
                        <div class="space-y-6 text-lg text-gray-600">
                            <div class="flex flex-col md:flex-row gap-6 items-start">
                                <div class="flex-1 space-y-6">
                                    <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                                        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center gap-2">
                                            <i class="fa-solid fa-user-pen text-indigo-500"></i>
                                            个人简介
                                        </h3>
                                        <p class="text-gray-600">{{ request.user.profile.bio|default:'这个人很懒，还没有填写个人简介...' }}</p>
                                        <a href="{% url 'account:profile' %}" class="inline-flex items-center mt-4 text-sm text-indigo-600 hover:text-indigo-800">
                                            <i class="fa-solid fa-pen-to-square mr-1"></i>
                                            编辑简介
                                        </a>
                                    </div>
                                    
                                    <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                                        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center gap-2">
                                            <i class="fa-solid fa-briefcase text-indigo-500"></i>
                                            工作经历
                                        </h3>
                                        <div class="space-y-4">
                                            <div class="flex items-start gap-4">
                                                <div class="flex-1">
                                                    <h4 class="font-medium text-gray-900">软件工程师</h4>
                                                    <p class="text-sm text-gray-500">2020 - 至今</p>
                                                    <p class="mt-2 text-gray-600">负责系统架构设计和核心功能开发</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="md:w-1/3 space-y-6">
                                    <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                                        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center gap-2">
                                            <i class="fa-solid fa-chart-line text-indigo-500"></i>
                                            统计信息
                                        </h3>
                                        <div class="space-y-3">
                                            <div class="flex justify-between items-center">
                                                <span class="text-gray-600">活跃天数</span>
                                                <span class="font-medium text-gray-900">365天</span>
                                            </div>
                                            <div class="flex justify-between items-center">
                                                <span class="text-gray-600">项目数量</span>
                                                <span class="font-medium text-gray-900">12个</span>
                                            </div>
                                            <div class="flex justify-between items-center">
                                                <span class="text-gray-600">获赞数</span>
                                                <span class="font-medium text-gray-900">2.3k</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                                        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center gap-2">
                                            <i class="fa-solid fa-certificate text-indigo-500"></i>
                                            认证信息
                                        </h3>
                                        <div class="space-y-2">
                                            <div class="flex items-center gap-2 text-gray-600">
                                                <i class="fa-solid fa-check text-green-500"></i>
                                                <span>邮箱已验证</span>
                                            </div>
                                            <div class="flex items-center gap-2 text-gray-600">
                                                <i class="fa-solid fa-check text-green-500"></i>
                                                <span>手机已验证</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}